<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <meta content="webkit" name="renderer">

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <link href="/layui-v2.6.4/layui/css/layui.css" media="all" rel="stylesheet">
    <script charset="UTF-8" src="/js/jquery-3.5.1.min.js"></script>
</head>
<script charset="utf-8" src="/layui-v2.6.4/layui/layui.js"></script>

<body>


<!--跳转表格-->
<script>
    function toEchart() {
        location.assign("toAddEntrustPage")
    }
</script>
<a class="layui-btn  layui-btn-sm" onclick="toEchart()">表格显示</a>
<!--<a class="layui-btn layui-btn-normal layui-btn-sm" onclick="toReSignin()">添加一个委托类型</a>-->

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div class="layui-row layui-fluid">
    <!--柱状图的DOM-->
    <div class="layui-col-md6" id="main" style="height:400px;margin-top: 120px"></div>
    <!--饼图的DOM-->
    <div class="layui-col-md6" id="main1" style="height:400px;margin-top:120px"></div>
</div>
<!--柱状图-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $.ajax({
        url: "/entrustTypeEchart"
        , type: 'get'
        , dataType: "json"
        , success: function (EntrustTypeMap) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '委托类型数据图'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                tooltip: {},
                legend: {
                    data: ['类型']
                },
                xAxis: {
                    data: EntrustTypeMap.X
                },
                yAxis: {},
                series: [{
                    name: '委托类型数据',
                    type: 'bar',
                    data: EntrustTypeMap.Y
                }]
            }; // 指定图表的配置项和数据
            myChart.setOption(option);
        }
    });

</script>

<!--饼图的DOM-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    $.ajax({
        url: "/entrustTypeEchartSector"
        , type: 'get'
        , success: function (str) {
            var myChart = echarts.init(document.getElementById('main1'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '委托类型数据饼状图',
                    subtext: '实时数据',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '60%',
                            data: JSON.parse(str),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 40,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    });


</script>


<script>
    function toReSignin() {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: 'yourclass',
            content: '<div>\n' +
                '\t\t\t    <span id="msgs">&nbsp;</span>' +
                '\t\t\t    <span id="msg"    >&nbsp;</span>' +
                '\t\t\t    <form class="layui-form"   action="/addEntrustType" method="post" >\n' +
                '\t\t\t        <div class="layui-form-item" style="margin: 20px;">\n' +
                '\t\t\t            <label class="layui-form-label">请输入一个类型</label>\n' +
                '\t\t\t            <div class="layui-input-block">\n' +
                '\t\t\t                <input class="layui-input" type="text" id="EntrustType" name="EntrustType" required lay-verify="required"\n' +
                '\t\t\t                       placeholder="请输入一个类型" autocomplete="off"  onblur="a1()">\n' +
                '\t\t\t            </div>\n' +
                '\t\t\t        </div>\n' +
                '\t\t\t        <div class="layui-form-item" style="margin: 20px;">\n' +
                '\t\t\t            <div class="layui-input-block">\n' +
                '\t\t\t                <input class="layui-btn"    value="验证">\n' +
                '\t\t\t                <input class="layui-btn" type="submit"    value="提交">\n' +
                '\t\t\t            </div>\n' +
                '\t\t\t        </div>\n' +
                '\t\t\t    </form>\n' +
                '\t\t\t</div>'
        });
    }
</script>

<script>
    function a1() {
        $.ajax({
            url: "/judgeTypeRep"
            , type: 'get'
            , async: false
            , data: {
                EntrustType: $("#EntrustType").val()
            }
            , success: function (data) {
                if (data.toString() == "ok") {
                    $("#msgs").css("color", "green")
                    layer.msg('无重复可插入');
                } else {
                    $("#msgs").css("color", "red")
                    layer.msg('!!!有重复!!不插入');
                }
                $("#msgs").html(data)
            }
        });
    }
</script>
</body>
</html>